<template>
    <div class="app-container">
        <el-card>
            <el-form inline :model="searchForm" size="small">
                <el-form-item label="视频标签">
                    <el-input v-model="searchForm.tags" placeholder="请输入视频标签" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item label="vid">
                    <el-input v-model="searchForm.vid" placeholder="请输入vid" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="startTime">
                    <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
                        placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
                        format="yyyy 年 MM 月 dd 日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>-</el-form-item>
                <el-form-item>
                    <el-date-picker v-model="searchForm.endTime" align="right" type="date" placeholder="选择结束日期"
                        :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" @click="resetList()">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
                </el-form-item>

            </el-form>
            <el-table v-loading="listLoading" :data="tableData.data" element-loading-text="拼命加载中" border fit
                highlight-current-row>
                <el-table-column label="序号" width="50">
                    <template slot-scope="scope">
                        <span v-text="scope.$index + 1"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="vid">
                    <template slot-scope="scope">
                        <span v-text="scope.row.vid"></span>
                        <i @click="copyHandle(scope.row.vid)" style="color: #409eff; cursor: pointer"
                            class="el-icon-document-copy"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="title" align="center" label="视频名称"></el-table-column>
                <el-table-column prop="posterUri" align="center" label="封面图">
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.posterUri"
                            :preview-src-list="[scope.row.posterUri]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="视频标签">
                    <template slot-scope="scope">
                        <el-tag size="mini" v-for="(item, index) in scope.row.tags" :key="index" type="success"
                            style="margin-right: 5px">{{ item }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.publishStatus == 'Published'" type="success">发布</el-tag>
                        <el-tag v-if="scope.row.publishStatus == 'Unpublished'" type="info">未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
                <el-table-column label="操作" align="center" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleClick(scope.row)">预览</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pageRight">
                <el-pagination background @size-change="handleSizeChange" :total="tableData.total"
                    @current-change="handleCurrentChange" :current-page="searchForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" />
            </div>
        </el-card>
        <detail ref="detailRef"></detail>
    </div>
</template>

<script>
import detail from './components/detail.vue';
import { getThirdMaterialList, addThirdMaterial } from '@/api/hotVideo'
export default {
    components: {
        detail,
    },
    data() {
        return {

            // beginTime&endTime&pageNum=0&pageSize=10&vid&status&order&tags&classificationIds&title
            searchForm: {
                pageNum: 1,
                pageSize: 10,
                beginTime: '',
                endTime: '',
                vid: '',
                status: '',
                order: '',
                tags: '',
                classificationIds: '',
                title: ''
            },
            tableData: {
                data: [],
                total: 0,
            },
            listLoading: false,
            fileList: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        copyHandle(val) {
            navigator.clipboard.writeText(val);
            this.$message({
                type: "success",
                message: "复制成功",
            });

        },
        handleClick(v) {
            this.$refs.detailRef.openlog(v)
        },
        searchList() {
            this.getList();
        },
        resetList() {
            this.searchForm = {
                pageNum: 1,
                pageSize: 10,
                beginTime: '',
                endTime: '',
                vid: '',
                status: '',
                order: '',
                tags: '',
                classificationIds: '',
                title: ''
            },
                this.getList();
        },
        handleSizeChange(val) {
            this.searchForm.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.searchForm.pageNum = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            getThirdMaterialList(this.searchForm).then(res => {
                this.tableData.data = res.data.list;
                this.tableData.total = res.data.total;
            }).finally(() => {
                this.listLoading = false;
            })
        },
    }
}
</script>

<style></style>